$breakpoint: (
  // 手机
  phone: (320px, 480px),
  // 平板
  pad: (481px, 768px),
  // 桌面(电脑)
  desktop: (769px, 1024px),
  // 大屏
  large-screen: (1025px, 1960px),
  // 电视
  tv: 1201px
);

// 响应式样式
@mixin responsive-style($devices...) {
  @each $device in $devices {
    $bp: map-get($breakpoint, $device);

    @if type-of($bp) == 'list' {
      @media (min-width: nth($bp, 1)) and (max-width: nth($bp, 2)) {
        @content;
      }
    } @else {
      @media (min-width: $bp) {
        @content;
      }
    }
  }
}

// el-menu相关active hover样式
@mixin common-menu-styles {
  
}
